{% extends "base.html" %}

{% block title %}{{ book.title }} - 墨韵图书共享平台{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card ink-card mb-4">
                <div class="card-body">
                    <h2 class="card-title mb-3">{{ book.title }}</h2>
                    <h6 class="card-subtitle mb-3 text-muted">作者：{{ book.author }}</h6>
                    
                    {% if book.category %}
                    <div class="mb-3">
                        <span class="badge bg-primary">{{ book.category.name }}</span>
                    </div>
                    {% endif %}
                    
                    <div class="mb-4">
                        <h5>图书简介</h5>
                        <p class="card-text">{{ book.description or '暂无简介' }}</p>
                    </div>
                    
                    <div class="mb-4">
                        <h5 class="d-flex justify-content-between align-items-center">
                            <span>在线阅读</span>
                            {% set file_ext = book.file_path.split('.')[-1].lower() %}
                            {% if file_ext == 'pdf' %}
                            <button class="btn btn-sm btn-outline-primary" id="fullscreen-btn">
                                <i class="fas fa-expand"></i> 全屏阅读
                            </button>
                            {% endif %}
                        </h5>
                        
                        {% if file_ext == 'pdf' %}
                        <!-- PDF 在线预览 -->
                        <div class="pdf-container mb-3 position-relative">
                            <div class="ratio ratio-16x9" id="pdf-viewer">
                                <iframe src="{{ url_for('read_book', book_id=book.id) }}" 
                                        allowfullscreen class="rounded shadow-sm" id="pdf-iframe"></iframe>
                            </div>
                        </div>
                        {% elif file_ext in ['jpg', 'jpeg', 'png', 'gif'] %}
                        <!-- 图片预览 -->
                        <div class="text-center mb-3">
                            <img src="{{ url_for('read_book', book_id=book.id) }}" 
                                 alt="{{ book.title }}" class="img-fluid rounded shadow-sm">
                        </div>
                        {% else %}
                        <!-- 不支持预览的文件类型 -->
                        <div class="alert alert-info mb-3">
                            <i class="fas fa-info-circle me-2"></i>
                            此类型的文件不支持在线预览，请下载后查看。
                        </div>
                        {% endif %}
                        
                        <div class="d-grid">
                            <a href="{{ url_for('download_book', book_id=book.id) }}" 
                               class="btn btn-primary">
                                <i class="fas fa-download me-2"></i>下载电子书
                            </a>
                        </div>
                    </div>
                    
                    <!-- 收藏功能 -->
                    <div class="mb-4">
                        <button id="favorite-btn" class="btn btn-outline-danger w-100 favorite-btn" data-book-id="{{ book.id }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% if book in current_user.favorite_books %}取消收藏{% else %}收藏此书{% endif %}">
                            <i class="{% if book in current_user.favorite_books %}fas{% else %}far{% endif %} fa-heart me-2"></i>
                            <span id="favorite-text">{% if book in current_user.favorite_books %}取消收藏{% else %}收藏此书{% endif %}</span>
                        </button>
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-eye me-1"></i> {{ book.views }} 次浏览
                        </div>
                        <div>
                            上传于 {{ book.created_at.strftime('%Y-%m-%d') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card ink-card">
                <div class="card-header ink-header">
                    <h5 class="mb-0">相关推荐</h5>
                </div>
                <div class="list-group list-group-flush">
                    {% if related_books %}
                        {% for related_book in related_books %}
                            <a href="{{ url_for('view_book', book_id=related_book.id) }}" 
                               class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">{{ related_book.title }}</h6>
                                    <small class="text-muted">{{ related_book.views }} 次浏览</small>
                                </div>
                                <small class="text-muted">{{ related_book.author }}</small>
                            </a>
                        {% endfor %}
                    {% else %}
                        <div class="list-group-item text-center text-muted py-3">
                            暂无相关图书推荐
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全屏模式的容器 -->
<div id="fullscreen-container" class="d-none">
    <div class="fullscreen-header bg-dark text-white p-2 d-flex justify-content-between align-items-center">
        <h5 class="mb-0">{{ book.title }}</h5>
        <button class="btn btn-sm btn-outline-light" id="exit-fullscreen-btn">
            <i class="fas fa-compress"></i> 退出全屏
        </button>
    </div>
    <div class="fullscreen-content">
        <!-- 全屏模式下的PDF内容会被动态插入这里 -->
    </div>
</div>

<style>
.ink-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ink-header {
    background-color: #f8f9fa;
    border-bottom: none;
    padding: 1.5rem;
}

.pdf-container {
    min-height: 500px;
}

#fullscreen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999;
}

.fullscreen-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
}

.fullscreen-content {
    position: absolute;
    top: 48px; /* 留出header的高度 */
    left: 0;
    width: 100%;
    height: calc(100% - 48px);
}

.fullscreen-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.favorite-btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-width: 1.5px;
}

.favorite-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.2);
}

.favorite-btn .fas.fa-heart {
    color: #dc3545;
}

.favorite-btn .far.fa-heart {
    transition: transform 0.3s ease, color 0.3s ease;
}

.favorite-btn:hover .far.fa-heart {
    transform: scale(1.2);
}

.favorite-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(220, 53, 69, 0.05), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.favorite-btn:hover::before {
    transform: translateX(100%);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 初始化工具提示
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
    
    // 收藏功能
    const favoriteBtn = document.getElementById('favorite-btn');
    if (favoriteBtn) {
        favoriteBtn.addEventListener('click', function() {
            const bookId = this.getAttribute('data-book-id');
            
            // 添加点击反馈动画
            this.classList.add('active');
            
            fetch(`/book/${bookId}/favorite`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'same-origin'
            })
            .then(response => response.json())
            .then(data => {
                const icon = this.querySelector('i');
                const text = this.querySelector('#favorite-text');
                const tooltip = bootstrap.Tooltip.getInstance(this);
                
                if (data.action === 'favorited') {
                    // 添加动画效果
                    icon.classList.add('animate__animated', 'animate__heartBeat');
                    
                    // 更新图标样式
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    
                    // 更新文本
                    text.textContent = '取消收藏';
                    
                    // 更新工具提示
                    this.setAttribute('data-bs-original-title', '取消收藏');
                    if (tooltip) tooltip.update();
                    
                    showToast('收藏成功', '图书已添加到您的收藏');
                } else {
                    // 添加取消动画
                    icon.classList.add('animate__animated', 'animate__fadeOut');
                    
                    setTimeout(() => {
                        icon.classList.remove('animate__fadeOut');
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        icon.classList.add('animate__fadeIn');
                        
                        // 更新文本
                        text.textContent = '收藏此书';
                        
                        setTimeout(() => {
                            icon.classList.remove('animate__fadeIn');
                        }, 500);
                    }, 300);
                    
                    // 更新工具提示
                    this.setAttribute('data-bs-original-title', '收藏此书');
                    if (tooltip) tooltip.update();
                    
                    showToast('已取消收藏', '图书已从您的收藏中移除');
                }
                
                // 移除active状态
                setTimeout(() => {
                    this.classList.remove('active');
                }, 200);
            })
            .catch(error => console.error('Error:', error));
        });
    }
    
    // 全屏功能代码
    const fullscreenBtn = document.getElementById('fullscreen-btn');
    const exitFullscreenBtn = document.getElementById('exit-fullscreen-btn');
    const fullscreenContainer = document.getElementById('fullscreen-container');
    const pdfIframe = document.getElementById('pdf-iframe');
    const fullscreenContent = document.querySelector('.fullscreen-content');
    
    if (fullscreenBtn) {
        fullscreenBtn.addEventListener('click', function() {
            // 创建一个新的iframe，源与原iframe相同
            const iframeSrc = pdfIframe.src;
            fullscreenContent.innerHTML = `<iframe src="${iframeSrc}" allowfullscreen></iframe>`;
            
            // 显示全屏容器
            fullscreenContainer.classList.remove('d-none');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        });
    }
    
    if (exitFullscreenBtn) {
        exitFullscreenBtn.addEventListener('click', function() {
            // 隐藏全屏容器
            fullscreenContainer.classList.add('d-none');
            document.body.style.overflow = ''; // 恢复背景滚动
        });
    }
});

// 显示提示信息
function showToast(title, message) {
    // 创建toast元素
    const toastEl = document.createElement('div');
    toastEl.className = 'toast align-items-center text-white bg-primary border-0';
    toastEl.setAttribute('role', 'alert');
    toastEl.setAttribute('aria-live', 'assertive');
    toastEl.setAttribute('aria-atomic', 'true');
    
    // 设置自动隐藏
    toastEl.setAttribute('data-bs-delay', '3000');
    
    // 添加内容
    toastEl.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">
                <strong>${title}</strong>: ${message}
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    `;
    
    // 添加到页面
    const toastContainer = document.querySelector('.toast-container');
    if (toastContainer) {
        toastContainer.appendChild(toastEl);
    } else {
        // 如果不存在容器则创建
        const newContainer = document.createElement('div');
        newContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
        newContainer.appendChild(toastEl);
        document.body.appendChild(newContainer);
    }
    
    // 显示toast
    const toast = new bootstrap.Toast(toastEl);
    toast.show();
}
</script>

<!-- 添加animate.css库提供动画效果 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
{% endblock %} 